<template>
  <div class="mb-10">


    <div class="form-group" style="display:flex;padding-top: 10px;">
      <div class="border">
        <Color :id="'color'+getColorId()" :index="1" :isColorShow="isColorShow"
               :key="color1"
               :item="option.attr.openColor"
               wh="30px" @updateValue="updateValue"/>
        <span>开启颜色</span>
      </div>
      <div class="border">
        <Color :id="'color'+getColorId()" :index="2" :isColorShow="isColorShow"
               :key="color2"
               :item="option.attr.closeColor"
               wh="30px" @updateValue="updateValue"/>
        <span>关闭颜色</span>
      </div>
      <div class="border">
        <Color :id="'color'+getColorId()" :index="3" :isColorShow="isColorShow"
               :key="color3"
               :item="option.attr.defaultColor"
               wh="30px" @updateValue="updateValue"/>
        <span>默认颜色</span>
      </div>

    </div>
  </div>
  <el-checkbox v-model="option.attr.autoShow" :disabled="!option.detail.isIconColor" label="根据设备状态调整图标色？"
               size="large"/>

</template>

<script setup lang="ts">
import {SelectIcon} from '@/types/selfAnalysis/addAnalysis';
import {computed, inject, nextTick, PropType, reactive, ref, toRefs, watch} from 'vue';
import * as echarts from "echarts";
import {chartIconsList, chartFontFamilyList, ChartLegendIcon} from "@/pages/selfAnalysis/components/enum";
import Color from '@/components/xnColorPicker/xnColorPicker.vue';
import {getColorId} from "@/utils/common";
import {PickCreateComponentType} from '@/packages/index.d'
import {loadAsyncComponent} from "@/utils";

// const Color = loadAsyncComponent(() => import('@/components/xnColorPicker/xnColorPicker.vue'))

const props = defineProps({
  option: {
    type: Object,
    required: true
  }
})

watch(() => props.option, (val) => {
  console.log(val)
  data.color1 = getColorId();
  data.color2 = getColorId();
  data.color3 = getColorId();
}, {deep: true})


const data = reactive({
  color1: '',
  color2: '',
  color3: '',
})
const {color1, color2, color3} = toRefs(data)


const emit = defineEmits(['update:option', 'update:selectIcon', 'hendlerSelectClick']);
const {option} = toRefs(props)


const updateValue = (value: any, index: any) => {
  let option = props.option.attr
  console.log(option)
  if (index.value == 1) {
    option.openColor = value
  } else if (index.value == 2) {
    option.closeColor = value
  } else if (index.value == 3) {
    option.defaultColor = value
  }
  console.log(props.option)
}

</script>

<style scoped lang="scss">
.form-group {
  text-align: center;

  .font-wrap {
    display: flex;
    align-items: center;


    .font-input {
      width: 50px;
      margin-left: 10px;
      margin-right: 10px;
    }

    input {
      text-align: center;
    }
  }

  .border {
    margin: 0px auto;
    text-align: -webkit-center;
  }
}
</style>
